<template>
	<view class="">
		<view class="">
			<Modlexqtitle :list="imglist" :name="obj.name"></Modlexqtitle>
			<view class="pricebox">
				<view class="price">
					{{obj.integral}}
				</view>
				<view class="xiaol">
					积分
				</view>
			</view>
		</view>
		<!-- <view class="hr"></view> -->
		<view class="hr"></view>
		<view class="jianjiebox">
			<view class="sp">商品介绍</view>
			<u-empty text="暂无商品介绍" mode="list" v-if="obj.introduce==''"></u-empty>
			<view class="jieshao">
				{{obj.introduce}}
			</view>
			<view class="imgboxs" v-for="(item,index) in obj.details_imgs" :key="index">
				<image :src="item" mode="widthFix"></image>
			</view>
		</view>

		<view class="dibu" @click="show=true">
			立即兑换
		</view>
		
		
		<!-- 规格弹框 -->
		<u-popup v-model="show" mode="bottom" closeable="true">
			<view class="upbox">
				<view class="bjqbox">
					<view class="title">
						兑换数量
					</view>
					<u-number-box v-model="value"  input-width="109" input-height="70" min="1"
						:max="max" bg-color="#F2F2F2">
					</u-number-box>
				</view>
				<view class="dhbox">
					<view class="souxu">
						所需积分：{{obj.integral*value}}
					</view>
					<view class="btnbox" @click="nowbuy">
						立即兑换
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import Modlexqtitle from "../../components/Modlexqtitle/index.vue"
	import {getintegralinfo} from "../../api/api/index.js"
	export default {
		data() {
			return {
				imglist: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
				}],
				name: "海南千禧圣女果小西红柿约1kg新鲜水果",
				remarkarr: [],
				flag: false,
				obj:{},
				show:false,
				value:1,
				max:99999
			}
		},
		methods: {
			public(){
				uni.showLoading({
					title:"加载中",
					icon:"none"
				})
				getintegralinfo({id:this.id}).then(res=>{
					uni.hideLoading()
					this.obj=res.data
					this.imglist=res.data.banner.map(v=>{
						return {image:v}
					})
				})
			},
			nowbuy(){
				this.jumpLink({link:"/pagesB/jfConfirm_purchase/index",query:{id:this.obj.id,value:this.value}})
			}
		},
		components: {
			Modlexqtitle,
		},
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.hr {
		height: 15rpx;
		background-color: #ededed;
	}

	.more {
		text-align: center;
		margin: 0 auto;
		width: 247rpx;
		height: 65rpx;
		background-color: #FFFFFF;
		border-radius: 65rpx;
		text-align: center;
		color: #000000;
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		line-height: 65rpx;
		border: 1rpx solid #CCCCCC;
	}


	.sp {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		color: #000000;
		font-weight: 700;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.jianjiebox {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		margin-bottom: 130rpx;
		.jieshao{
			text-indent:50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #282828;
			line-height: 40rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.dibu {
		position: fixed;
		bottom: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		height: 100rpx;
		background-color: #f20e0e;
	}

	.pricebox {
		margin-top: 53rpx;
		display: flex;
		// justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 70rpx;

		.price {
			font-family: PingFang-SC-Medium;
			font-size: 48rpx;
			color: #ef0000;

			text {
				font-size: 31rpx;
			}
		}

		.xiaol {
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
			margin-left: 15rpx;
		}
	}
	.imgboxs {
		width: 100%;
	
		image {
			width: 100%;
			margin-top: 30rpx;
		}
	}
	.bjqbox{
		display: flex;
		justify-content: space-between;
		margin-top: 100rpx;
		margin-bottom: 71rpx;
		align-items: center;
		margin-right: 37rpx;
		.title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #000000;
			margin-left: 27rpx;
		}
	}
	.dhbox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.souxu{
			margin-left: 26rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #282828;
		}
		.btnbox{
			background-color: #F20E0E;
			width: 210rpx;
			height: 70rpx;
			border-radius: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 37rpx;
		}
	}
	
</style>
